import React , {useState,useEffect} from 'react'
import {Row,Col,Input,Select,Button,DatePicker,message,Modal} from 'antd'
import './index.css'
import marked from 'marked'
import {sendActionGet, sendActionPOST} from '../../utils/axios'
import { pushArticleURL,updateArticleURL,getDetailURL } from '../../utils/api'

const AddArticle = (props)=>{

    const [articleId,setArticleId] = useState(0)  // 文章的ID，如果是0说明是新增加，如果不是0，说明是修改
    const [articleTitle,setArticleTitle] = useState()   //文章标题
    const [articleContent , setArticleContent] = useState('')  //markdown的编辑内容
    const [markdownContent, setMarkdownContent] = useState() //html内容
    const [introducemd,setIntroducemd] = useState('')            //简介的markdown内容
    const [introducehtml,setIntroducehtml] = useState() //简介的html内容
    const [showDate,setShowDate] = useState()   //发布日期

    useEffect(()=>{
        const id = props.match.params.id
        if(id){
            getDetail(id)
        }
    },[])


    //markdown 设置
    marked.setOptions({ 
        renderer: marked.Renderer(),
        gfm: true,
        pedantic: false,
        sanitize: false,
        tables: true,
        breaks: false,
        smartLists: true,
        smartypants: false,
      }); 

    const changeTitle=(e)=>{
        setArticleTitle(e.target.value)
    }

    const changeContent=(e)=>{
        setArticleContent(e.target.value)
        let html = marked(e.target.value)
        setMarkdownContent(html)
    }

    const changeIntroduce=(e)=>{
        setIntroducehtml(e.target.value)
        let html = marked(e.target.value)
        setIntroducemd(html)
    }

    const changeDate=(date,dateString)=>{
        setShowDate(dateString)
    }

    const checkArticle=()=>{
        if(!articleTitle){
            message.error('文章题目不能为空')
        }else if(!articleContent){
            message.error('文章内容不能为空')
        }else if(!introducehtml){
            message.error('文章简介不能为空')
        }else if(!showDate){
            message.error('文章日期不能为空')
        }else{
            Modal.confirm({
                title:'验证成功',
                content:'是否决定上传',
                onOk:()=>{
                    pushArticle()
                }
            })
        }

    }

    const pushArticle = async()=>{
        const res = await sendActionPOST(pushArticleURL,{
            type_id:1,
            title:articleTitle,
            article_content:articleContent,
            introduce:introducehtml,
            addTime:showDate
        })
        if(res.data.affectedRows===1){
            setArticleId(res.data.insertId)
            message.success('上传成功')
        }else{
            message.error('上传失败')
        }
    }

    const updateArticle=async()=>{
        if(articleId===0){
            message.error('请先发布文章')
        }else if(!showDate){
            message.error('请先选择发布时间')
        }
        else{
            const res = await sendActionPOST(updateArticleURL,{
                id:articleId,
                title:articleTitle,
                article_content:articleContent,
                introduce:introducehtml,
                addTime:showDate
            })
            if(res.data.affectedRows===1){
                message.success('修改成功')
            }else{
                message.error('修改失败')
            }
        }
    }

    const getDetail=async(id)=>{
        const res =await sendActionGet(getDetailURL+`/${id}`)
        console.log('12312312',res);
        if(res.data.data.length===0){
            message.error('文章不存在')
        }else{
            setArticleId(id)
            setArticleContent(res.data.data[0].article_content)
            setArticleTitle(res.data.data[0].title)
            setIntroducehtml(res.data.data[0].introduce)
        }
    }



    return(
        <div>
            <Row gutter={5}>
                <Col span={18}>
                    <Row gutter={10}>
                        <Col span={20}>
                            <Input placeholder="博客标题" size='large' value={articleTitle} onChange={changeTitle}/>
                        </Col>
                        <Col span={4}>
                            <Select defaultValue='sign up' size='large'>
                                <Select.Option value='sign up'>笔记</Select.Option>
                            </Select>
                        </Col>
                    </Row>
                    <br/>
                    <Row gutter={8}>
                        <Col span={12}>
                            <Input.TextArea className='markdown-content' rows={35} placeholder='文章内容' value={articleContent} onChange={changeContent} />
                        </Col>
                        <Col span={12}>
                            <div dangerouslySetInnerHTML={{__html:markdownContent}} className='show-html'/>
                        </Col>
                    </Row>
                </Col>
                <Col span={6}>
                    <Row gutter={8}>
                        <Col span={24}>
                            <Row justify="start" gutter={16}>
                            <Col span={6}><Button type='primary' size='large' onClick={checkArticle} >发布文章</Button></Col>
                            <Col span={6}><Button type="default" size="large" onClick={updateArticle}>修改文章</Button></Col>
                            </Row>
                        </Col>
                        <Col span={24}>
                            <br/>
                            <Input.TextArea rows={4} placeholder='文章简介' value={introducehtml} onChange={changeIntroduce}/>
                            <br/>
                            <br/>
                            <div dangerouslySetInnerHTML={{__html:introducemd}} className='introduce-html'/>
                        </Col>
                        <Col span={12}>
                            <br/>
                            <div className='data-select'>
                                <DatePicker placeholder='请选择日期' size='large' onChange={changeDate}/>
                            </div>
                        </Col>
                    </Row>
                </Col>
            </Row>
        </div>
    )
}

export default AddArticle